<template>
    <div class="productLine">
        <div class="tempxyz rightTable">
            <CCard class="rightCard">
                <CCardHeader class="header-wraper">
                    <div class="header-left-titleWraper">
                        <img
                                @click="goBack"
                                src="@/assets/icons/goback.svg"
                                alt
                                class="goBtn"
                        />
                        <span class="textTitle">过程数据管理日志</span>
                    </div>
                </CCardHeader>
                <CCardBody class="card-body">
                    <div class="oneMargin"  @keyup.enter="search()">
                        <CRow class="twoMargin" style="margin-bottom: 10px">
                            <CCol sm="4" class="myCol" style="display: flex;align-items: center">
                                <label class="labelName" style="width: 60px">任务名称</label>
                                <Input
                                        v-model="form.taskName"
                                        placeholder="请输入名称"
                                        style="width: 300px"
                                />
                            </CCol>
                            <CCol sm="2" class="myCol" style="display: flex;align-items: center">
                              <label class="labelName" style="width: 60px">状态</label>
                              <RadioGroup v-model="form.status">
                                <Radio :label=1>成功</Radio>
                                <Radio :label=0>失败</Radio>
                              </RadioGroup>
                            </CCol>
                            <CCol sm="2" class="myCol" style="display: flex;align-items: center">
                              <label class="labelName" style="width: 60px">删除记录</label>
                              <Radio v-model="form.record"></Radio>
                            </CCol>
                            <CCol sm="3" class="myCol searchPosition">
                                <CButton
                                        color="info"
                                        class="system-btn-style"
                                        @click="search"
                                >
                                    <CIcon name="cil-magnifying-glass" />&nbsp;搜索
                                </CButton>
                                <CButton
                                        color="info"
                                        class="myCol clean system-btn-style"
                                        @click="clearSearch"

                                >
                                    <img
                                            src="@/assets/icons/chongzhi.png"
                                            style="width: 15px; height: 15px"
                                            alt
                                    />&nbsp; 重置
                                </CButton>
                                <CButton
                                        color="info"
                                        @click="clearSelectItem"
                                        style="margin-left: 20px"
                                        class="myCol clean system-btn-style"
                                >
                                    <i class="fa fa-close"></i>&nbsp; 批量删除
                                </CButton>
                            </CCol>
                        </CRow>
                    </div>

                    <div style="height: calc(100% - 46px)">
                        <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios" selection @selectionChange="selectionChange">
                            <template v-slot:status="item">
                                <div>{{item.data.row.status==1?"成功":"失败"}}</div>
                            </template>

                        </TableList>
                    </div>
                </CCardBody>
            </CCard>
        </div>
    </div>
</template>

<script>
    import TableList from "../../../template/table/TableList";
    export default {
        name: "dailyRecord",
        components: {TableList},
        data(){
            return {
                selectTime: [],
                form:{
                  taskName  : "",
                  record: "",
                  status: "",
                },
                routerData: this.$route.params,
                getColumns: [
                    {
                        title: "绑定流程",
                        key: "name",
                    },
                    {
                        title: "扫描目录",
                        key: "delRecord",
                    },
                    {
                        title: "创建时间",
                        key: "createTime",
                        width: 280,
                        className: "centerText",
                    },
                    {
                        title: "状态",
                        key: "status",
                        slot: "status",
                        width: 180,
                        className: "centerText",
                    },
                   /* {
                        key: "show_details",
                        slot: "show_details",
                        title: "操作",
                        width: 320,
                        className: "centerText",
                    },*/
                ],
                getAxios: {
                    url: this.$api.manageApi.fileManageQueryLog, //请求路径
                    method: "get", //请求方式
                    dataList: {
                      jobId:this.$route.params.id
                    }, //请求参数
                },
                selectData: []
            };
        },
        computed: {},
        mounted() {

        },

        methods: {
            search() {
                let that=this;
                Object.assign(that.form,{currentPageNum: false})
                that.$refs.table.getRefreshTable(that.form);
            },
            clearSearch() {
                let that=this;
                that.form.taskName = "";
                that.form.record = "";
                that.form.status ="";
                Object.assign(that.form,{currentPageNum: false})
                that.$refs.table.getRefreshTable(that.form);
            },
            clearSelectItem() {
                let that=this
                let data = [];
                this.selectData.forEach((item)=>{
                    if (item.id) {
                        data.push(item.id);
                    }
                })
                if (data.length == 0) {
                    that.$Message.info('请选择项目！');
                    return;
                }
                this.http.post(that.$api.manageApi.fileManageDeleteLog,data)
                    .then((res)=>{
                        if (res.data.success) {
                            that.$Message.success('删除成功!');
                            Object.assign(that.form,{currentPageNum: true})
                            that.$refs.table.getRefreshTable(that.form)
                        } else {
                            that.$Message.error('删除失败!');
                        }
                    })
                    .catch(()=>{ that.$Message.error('删除失败，请联系管理员！');});
            },
            selectionChange(item) {
                this.selectData = item;
            },
            onChange(dataTime,dataList) {
                this.form.startTime=dataTime[0];
                this.form.endTime=dataTime[1];
            },
            goBack() {
                this.$router.push({
                    name:"processData"
                })
            },


        }
    }
</script>


<style scoped>
    .col-xl-12 {
        padding-left: 20px;
        padding-right: 20px;
    }

    @media screen and (min-width: 1367px) {
    }
    .footerPage {
        display: flex;
        justify-content: flex-end;
        cursor: pointer;
        color: #151517 !important;
        /* margin-right: 10px; */
    }
    .pageContent {
        margin-right: 26px;
        font-size: 14px;
    }
    .selectStyle {
        display: inline-block;
        width: 100px;
        margin-right: 5px;
    }

    .templateTitle {
        margin-bottom: 0 !important;
    }

    .page-link:hover {
        background-color: #ffffff;
        border-color: #ffffff;
    }

    .templateMangeTable {
        height: 100%;
        overflow-y: auto;
    }
    .template {
        height: calc(100% - 52px);
        overflow-y: auto;
    }
    .ipTestStyle {
        font-size: 8px;
        width: 250px;
        height: 2px;
        margin-top: -6px;
        margin-bottom: 16px;
        margin-left: 120px;
    }
    .spanLabel {
        font-size: 14px;
    }
    .btnSelectInfo {
        width: 70px;
        height: 29px;
        font-size: 14px;
        margin-left: 18px;
        margin-bottom: 11px;
        margin-top: 10px;
    }
    .treeDiv {
        height: 400px;
        width: 466px;
        overflow-y: auto;
    }
    .showContent {
        height: 466px;
    }
    .showContentLeft {
        max-width: 50%;
    }
    .showContentRight {
        max-width: 50%;
        height: 466px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .paramli {
        align-items: center;
        display: flex;
        height: 50px;
    }
    .selectParamKey {
        width: 95%;
        position: absolute;
        left: 105px;
        margin-bottom: 0;
    }
    .selectParamLabel {
        width: 25%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>

<style scoped>
    .goBtn {
        width: 25px;
        height: 25px;
        margin-top: 9px;
        margin-right: 7px;
    }
    /deep/.ivu-table td.centerText {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        text-align: -moz-center;
        text-align: -webkit-center;
    }

    .onButton:hover {
        color: white;
    }

    /deep/.col-form-label {
        text-align: right;
    }

    /deep/.searchPosition {
        position: absolute;
        right: 0;
    }

    /deep/.searchPosition .btn {
        margin-left: 15px;
    }

    .twoMargin {
        position: relative;

    }
</style>
